<template>
  <div class="card">
    <bill-card-list
      v-model:selectId="selectId"
      :list="list"
      @add="visible = true"
    />

    <div
      v-if="list.length"
      class="flex1"
    >
      <bill-card-detail />
      <bill-card-his />
    </div>
    <n-flex
      v-else
      justify="center"
      align="center"
      class="flex1 bg-fff box"
    >
      <n-empty description="暂无数据" />
    </n-flex>
  </div>
  <custom-form
    v-model:form="form"
    v-model:visible="visible"
    :config-list="configList"
    :height="470"
    :width="430"
    @confirm="handleConfirm"
  />
</template>

<script lang="ts" setup>
  // 添加显示
  const visible = ref(false)
  // 表单数据
  const form = ref({})
  // 表单配置
  const configList = ref<FormRenderConfig[]>([
    {
      type: 'number',
      label: '起始金额',
      key: 'money',
      span: 24
    },
    {
      type: 'input',
      label: '卡号',
      key: 'number',
      span: 24
    },
    {
      type: 'input',
      label: '支付类型',
      key: 'name',
      span: 24
    }
  ])

  // 提交
  function handleConfirm() {
    $dialog('是否确认提交？').then(() => {
      http.post('/bill/card', { ...form.value }).then(() => {
        visible.value = false
        form.value = {}
        $message.success('添加成功')
      })
    })
  }

  // 选中的id
  const selectId = ref<number | null>(null)

  const { list } = useList({
    reqUrl: 'bill/card',
    isPage: false,
    afterQuery: arr => {
      selectId.value = arr[0]?.id
    }
  })

  const { $dialog, $message } = useFastNaive()
</script>

<style scoped lang="scss">
  .card {
    height: calc(100vh - 60px);
    width: 100%;
    padding: $space-default;
    box-sizing: border-box;
    display: flex;
  }
</style>
